<template>
    <ContentBox title="销售详情">
        <div class="xiaoshou">
            <div class="hl-search">
                <el-select v-model="value" placeholder="" class="hl-select">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-input v-model="input" placeholder="" class="hl-input"></el-input>
            </div>
            <div class="hl-datapicker">
                <span>日期</span>
                <el-date-picker
                        v-model="value1"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>

                <span>地区</span>
                <el-select v-model="value" placeholder="" class="hl-select">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>

            </div>
            <div class="hl-table">
                <dv-scroll-board :config="config" style="height:800px"/>
            </div>
        </div>
    </ContentBox>
</template>
<script>
    import ContentBox from "../../components/common/ContentBoxSmall"

    export default {
        name: "Preview",
        data() {
            return {
                config: {
                    headerHeight: 100,
                    oddRowBGC: "#020846",
                    evenRowBGC: '020846',
                    align: ["center", "center", "center", "center", "center"],
                    header: ['发布时间', '状态', '标题', '发布党组织', '类型'],
                    data: [
                        ['2020-1-13', '已审核', '焦点建党70周年', '中国共产党丰县委员会', '普通'],
                        ['2020-1-13', '已审核', '焦点建党70周年', '中国共产党丰县委员会', '普通'],
                        ['2020-1-13', '已审核', '焦点建党70周年', '中国共产党丰县委员会', '普通'],
                        ['2020-1-13', '已审核', '焦点建党70周年', '中国共产党丰县委员会', '普通'],
                        ['2020-1-13', '已审核', '焦点建党70周年', '中国共产党丰县委员会', '普通'],
                        ['2020-1-13', '已审核', '焦点建党70周年', '中国共产党丰县委员会', '普通'],
                        ['2020-1-13', '已审核', '焦点建党70周年', '中国共产党丰县委员会', '普通'],
                        ['2020-1-13', '已审核', '焦点建党70周年', '中国共产党丰县委员会', '普通'],
                        ['2020-1-13', '已审核', '焦点建党70周年', '中国共产党丰县委员会', '普通'],
                    ]
                },
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                value: '',
                input: '',
                value1: '3',
            }
        },
        components: {
            ContentBox,
        }
    }
</script>

<style lang="scss" scoped>
    .xiaoshou {
        width: 100%;
        height: 100%;

        display: flex;
        flex-direction: column;
        padding: 0 20px;
        .hl-search {
            height: 86px;
            display: flex;
            border-radius: 14px;

            border: 1px solid #02C1C5;
            .hl-select {
                /*width: 300px !important;*/
                height: 80px;
                /deep/ .el-input {
                    height: 100%;
                    .el-input__inner {
                        width: 300px;
                        height: 100%;
                        border: none;
                        border-radius: 10px 0 0 10px;
                        font-size: 40px;

                    }
                }
            }
            .hl-input {
                height: 80px;
                /deep/ .el-input__inner {
                    height: 100%;
                    font-size: 40px;
                    border: none;
                    border-radius: 0 10px 10px 0;
                }
            }
        }

        .hl-datapicker {
            height: 120px;

        }
        .hl-table {
            flex: 1;
            /*background: red;*/
            padding: 0 40px;
            /deep/ .header-item {
                font-size: 40px;
            }
            /deep/ .ceil {
                font-size: 36px;
            }

        }

    }
</style>
